<template>
  <div class="mobile-fixed-pagination" v-if="total > 0">
    <div class="pagination-wrapper">
      <div class="page-info">
        <span>{{ currentPage }}/{{ totalPages }}页</span>
        <span class="total-records">共{{ total }}条</span>
      </div>
      
      <div class="page-controls">
        <el-button 
          size="mini" 
          icon="el-icon-arrow-left"
          :disabled="currentPage <= 1"
          @click="goToPrevPage">
        </el-button>
        
        <span class="page-indicator">
          <el-input 
            v-model.number="pageInput" 
            size="mini"
            type="number" 
            :min="1" 
            :max="totalPages"
            @blur="handlePageInputBlur"
            @keyup.enter.native="handlePageInputEnter">
          </el-input>
        </span>
        
        <el-button 
          size="mini" 
          icon="el-icon-arrow-right"
          :disabled="currentPage >= totalPages"
          @click="goToNextPage">
        </el-button>
      </div>
      
      <div class="page-size-selector">
        <el-select 
          v-model="pageSizeModel" 
          size="mini"
          @change="handleSizeChange"
          placeholder="每页条数">
          <el-option
            v-for="item in pageSizes"
            :key="item"
            :label="`${item}条/页`"
            :value="item">
          </el-option>
        </el-select>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MobilePagination',
  props: {
    currentPage: {
      type: Number,
      required: true
    },
    pageSize: {
      type: Number,
      required: true
    },
    total: {
      type: Number,
      required: true
    },
    pageSizes: {
      type: Array,
      default: () => [3, 5, 10, 20, 50]
    }
  },
  data() {
    return {
      pageInput: this.currentPage,
      pageSizeModel: this.pageSize
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSize);
    }
  },
  watch: {
    currentPage: {
      handler(newPage) {
        this.pageInput = newPage;
      }
    },
    pageSize: {
      handler(newSize) {
        this.pageSizeModel = newSize;
      }
    }
  },
  methods: {
    goToPrevPage() {
      if (this.currentPage > 1) {
        this.$emit('current-change', this.currentPage - 1);
      }
    },
    goToNextPage() {
      if (this.currentPage < this.totalPages) {
        this.$emit('current-change', this.currentPage + 1);
      }
    },
    handlePageInputBlur() {
      this.validateAndGoToPage();
    },
    handlePageInputEnter() {
      this.validateAndGoToPage();
    },
    validateAndGoToPage() {
      let targetPage = this.pageInput;
      
      // 确保页码在有效范围内
      if (isNaN(targetPage) || targetPage < 1) {
        targetPage = 1;
      } else if (targetPage > this.totalPages) {
        targetPage = this.totalPages;
      }
      
      // 更新输入框
      this.pageInput = targetPage;
      
      // 只有页码变化时才触发事件
      if (targetPage !== this.currentPage) {
        this.$emit('current-change', targetPage);
      }
    },
    handleSizeChange(size) {
      this.$emit('size-change', size);
    }
  }
}
</script>